<template>
  <div class="app-container">
    <div class="courseInfo">
      <img :src="coursePublish.cover" />
      <div class="main" style="margin-left:250px">
        <h2>{{ coursePublish.title }}</h2>
        <p class="gray"><span>共{{coursePublish.lessonNum}}课时</span></p>
        <p ><span>所属分类: {{coursePublish.subjectParentTitle}}--{{coursePublish.subjectTitle}}</span></p>
        <p>课程讲师: {{coursePublish.teacherName}}</p>
        <h3 class="red">￥{{coursePublish.price}}</h3>
      </div>
    </div>
    <div style="text-align: center">
      <el-button :disabled="Publishbtn" type="primary" @click="prev">上一步</el-button>
      <el-button :disabled="Publishbtn" type="primary" @click="publish">发布课程</el-button>
    </div>
  </div>
</template>
<script>
import courseApi from "@/api/course";
export default {
  data() {
    return {
      Publishbtn: false,
      coursePublish: {},
    };
  },
  created() {
    if (this.$parent.courseId) {
      this.fetchCoursePublishData(this.$parent.courseId);
      //访问数据
    }
  },
  methods: {
    prev() {
      this.Publishbtn = true;
      this.$parent.active = 1;
    },
    //课程发布
    publish(){
     courseApi.publishCourse(this.$parent.courseId).then(res=>{
         this.$parent.active=3;
         this.Publishbtn=true;
         if(res.code===20000){
             this.$message.success(res.message)
         }
         else{
             this.$message.error(res.message)
         }
     })
    },
    fetchCoursePublishData(id) {
      courseApi.findCoursePublish(id).then((res) => {
        this.coursePublish = res.data.item;
      });
    },
  },
};
</script>
<style>
 .courseInfo{
     background:#f5f5f5;
     padding: 20px;
     overflow: hidden;
     border: 1px dashed #DDD;
     margin-bottom: 40px;
    
     position: relative;
 }
 .courseInfo img{
     background: #d6d6d6;
     margin-right: 50px;
     margin-left: 20px;
     width: 550px;
     height: 270px;
     display: block;
     float: left;
     border: none;
 }
 .courseInfo .main p{
    margin-bottom: 10px;
    line-height: 24px;
    max-height: 48px;
    word-wrap: break-word;
    overflow: hidden;
 }
 .courseInfo .main h3{
     bottom: 20px;
     line-height: 1;
     font-size: 28px;
     font-weight: normal;
     color: #d32f24;
 }
</style>